<template>
  <view class="container">
    <view class="mapbox">
      <map style="width: 100%; height: 100%;" :polyline="polyline" id="map" class="map" :latitude="latitude" :longitude="longitude" :max-scale="16" :markers="markers" :show-location="true"></map>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        latitude: 37.3628,
				longitude: 122.355099,
				markers: [],
        polyline: [{
					points: [],
					width: 8,
					color: '#000000AA',
					borderWidth: 3,
				}],
        numid: 0,
      }
    },
    onLoad(options) {
      if(options) {
        this.getMap(options.id)
      }
    },
    methods: {
      getMap(id) {
        this.$request.gettracklist({ reservoirId: id }).then(res => {
          let list = res.data || []
          this.latitude = list[0].locationLatitude
				  this.longitude = list[0].locationLongitude
          let that = this
          list.forEach(v => {
            that.numid++
            this.markers.push({
							id: that.numid,
							width: 100,
							height: 100,
							longitude: v.locationLongitude,
							latitude: v.locationLatitude,
							iconPath: '../static/taskPoint.png',
						})
          })
          // setTimeout(() => {
            this.polyline[0].points = this.markers
            // this.polyline = [...this.polyline]
          // }, 0);
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .mapbox {
    width: 100vw;
    height: 100vh;
  }
</style>
